window.addEventListener('load', function () {

    // 获取元素
    var big_box = document.querySelector('.big_box')
    console.log(big_box);    

    var ul = big_box.children[0]
    console.log(ul);
    var w = big_box.offsetWidth;
    console.log(w);
    
   
    var  index=0

    var timer = setInterval(function () {
        index++ 
        var translatex = -index * w
        ul.style.transition=('all .5s')
        ul.style.transform = 'translateX(' + translatex + 'px)'
        
    },3000)
    //transitionend过度完成之后触发这个事件
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0
            ul.style.transition = 'none'
            var translatex = -index * w
            ul.style.transform = 'translateX(' + translatex + 'px)'
        } else if (index < 0) {
            index = 2
            ul.style.transition = 'none'
            var translatex = -index * w
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
       
    })

    // ul.addEventListener('')
})